<template>
    <!-- 图表统计 -->
    <div class="chartsCount-contianer">
        <div class="content">
            <!-- 未来7天预约票数统计 -->
            <div class="reservation">
                <div class="markBg-box-title" style="width: 195px;">未来七天预约票数统计</div>
                <div class="markBg-box-tourist">
                    <div class="topCharts">
                        <div id="weekTop5" style="width: 100%;height: 220px;"></div>
                    </div>
                </div>
            </div>
            <!-- 未来7天预约票数统计 -->
            <div class="refund">
                <div class="markBg-box-title" style="width: 180px;">近七天退票数量统计</div>
                <div class="markBg-box-tourist">
                    <div class="topCharts">
                        <div id="weekDay" style="width: 100%;height: 222px;"></div>
                    </div>
                </div>
            </div>
            <!-- 未来7天预约票数统计 -->
            <div class="channel">
                <div class="markBg-box-title">各渠道七天预约数据</div>
                <div class="markBg-box-tourist">
                    <div class="weekDatasBox">
                        <div class="weekDatasTitle">
                            <i></i><span>近七天预约数量</span> <b>{{channelTotal}}</b>
                        </div>
                        <div id="weekDatas" style="width: 100%;height: 190px;"></div>
                    </div>
                </div>
            </div>
            <!-- 未来7天预约票数统计 -->
            <div class="register">
                <div class="markBg-box-title">各渠道注册用户统计</div>
                <div class="markBg-box-tourist">
                    <div class="parkNumBox">
                        <div class="parkNumItem">
                            <div class="top">
                                <span>{{allUserObj.todayLoginUser}}</span>
                                <u>人</u>
                            </div>
                            <div class="bottom">今日新增用户</div>
                        </div>
                        <div class="parkNumItem">
                            <div class="top">
                                <span>{{allUserObj.loginUser}}</span>
                                <u>人</u>
                            </div>
                            <div class="bottom">总注册用户</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { futureSeven, outSeven, allUser, sevenMake, sevenChannel, } from '../../axios/manage/index'
    export default {
        name: "chartsCount",
        data() {
            return {
                futureSevenArr:[],
                outSevenArr:[],
                allUserObj:{},
                sevenMakeArr:[],
                sevenChannelArr:[],
                channelTotal:0,
                timer:null,
            }
        },
        mounted() {
            this.getFutureSeven();
            this.getOutSeven();
            this.getAllUser();
            this.getSevenMake();
            this.getSevenChannel();

            this.realTimeInit();
        },
        methods: {
            realTimeInit() {
                //实时数据刷新 10s一次
                let that = this;
                this.timer = setInterval(function () {
                    that.getFutureSeven();
                    that.getOutSeven();
                    that.getAllUser();
                    that.getSevenMake();
                    that.getSevenChannel();
                },10000)
            },
            getFutureSeven() {
                futureSeven().then(res => {
                    this.futureSevenArr = res.data;
                }, err => {
                })
            },
            getOutSeven() {
                outSeven().then(res => {
                    this.outSevenArr = res.data;
                }, err => {
                })
            },
            getAllUser() {
                allUser().then(res => {
                    this.allUserObj = res.data;
                }, err => {
                })
            },
            getSevenMake() {
                sevenMake().then(res => {
                    this.sevenMakeArr = res.data;
                }, err => {
                })
            },
            getSevenChannel() {
                sevenChannel().then(res => {
                    this.sevenChannelArr = res.data;
                    let num1 = 0;
                    let num2 = 0;
                    let num3 = 0;
                    let num4 = 0;
                    for(var i = 0; i < this.sevenChannelArr.length; i++) {
                        num1 += this.sevenChannelArr[i].bookingAppNum;
                        num2 += this.sevenChannelArr[i].bookingHouseofhelloNum;
                        // num3 += this.sevenChannelArr[i].bookingTuomaogzNum;
                        // num4 += this.sevenChannelArr[i].bookingAppletNum;
                    }
                    this.channelTotal = num1 + num2;
                }, err => {
                })
            },
            weekDatasInit() {
                var myChart = this.$echarts.init(document.getElementById('weekDatas'));
                const dateArr = []
                const appArr = [];
                const indexArr = [];
                const wxArr = [];
                const appletsArr = [];
                for(var i = 0; i < this.sevenChannelArr.length; i++) {
                    dateArr.push(this.sevenChannelArr[i].time);
                    appArr.push(this.sevenChannelArr[i].bookingAppNum);
                    indexArr.push(this.sevenChannelArr[i].bookingHouseofhelloNum);
                    wxArr.push(this.sevenChannelArr[i].bookingTuomaogzNum);
                    appletsArr.push(this.sevenChannelArr[i].bookingAppletNum);
                }
                var option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'none'
                        }
                    },
                    legend: [
                        {
                            orient: 'horizontal',
                            x: '35%',
                            y: '86%',
                            align: 'left',
                            data: ['移动端渠道'],
                            textStyle: {
                                fontSize: 10,
                                color: '#B2CEEC'
                            },
                            itemHeight: 5, //修改icon图形大小
                            itemWidth: 5, //修改icon图形大小
                        },
                        {
                            orient: 'horizontal',
                            x: '60%',
                            y: '86%',
                            align: 'left',
                            data: ['官网渠道'],
                            textStyle: {
                                fontSize: 10,
                                color: '#B2CEEC'
                            },
                            itemHeight: 5, //修改icon图形大小
                            itemWidth: 5, //修改icon图形大小
                        },
                        // {
                        //     orient: 'horizontal',
                        //     x: '50%',
                        //     y: '86%',
                        //     align: 'left',
                        //     data: ['公众号渠道'],
                        //     textStyle: {
                        //         fontSize: 10,
                        //         color: '#B2CEEC'
                        //     },
                        //     itemHeight: 5, //修改icon图形大小
                        //     itemWidth: 5, //修改icon图形大小
                        // },
                        // {
                        //     orient: 'horizontal',
                        //     x: '72%',
                        //     y: '86%',
                        //     align: 'left',
                        //     data: ['小程序渠道'],
                        //     textStyle: {
                        //         fontSize: 10,
                        //         color: '#B2CEEC'
                        //     },
                        //     itemHeight: 5, //修改icon图形大小
                        //     itemWidth: 5, //修改icon图形大小
                        // }
                    ],
                    grid: {
                        top: 0,
                        left: 50,
                        right: 22,
                        bottom: 50
                    },
                    calculable: true,
                    xAxis: [{
                        type: 'value',
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color: 'rgba(48,178,236,0.6)'
                            }
                        },
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            interval: 0,
                            color: '#B2CEEC',
                            fontSize: 10

                        },
                        splitArea: {
                            show: false
                        },
                        minInterval: 1,
                        max: function (value) {
                            if( value.max <= 1 ){
                                return value.max  = 10;
                            }if( value.max < 10 ){
                                return value.max = 10
                            }else{
                                return value.max;
                            }
                        }
                    }],
                    yAxis: [{
                        type: 'category',
                        axisLine: {
                            lineStyle: {
                                type: 'dashed',
                                color: 'rgba(48,178,236,0.6)'
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitArea: {
                            show: false
                        },
                        axisLabel: {
                            interval: 0,
                            color: '#B2CEEC',
                            fontSize: 10
                        },
                        data: dateArr
                    }],
                    series: [
                        {
                            name: '移动端渠道',
                            type: 'bar',
                            stack: '总量',
                            barMaxWidth: 8,
                            barGap: '10%',
                            itemStyle: {color: '#2BADFF'},
                            data: appArr
                        },
                        {
                            name: '官网渠道',
                            type: 'bar',
                            stack: '总量',
                            itemStyle: {color: '#32E9FF'},
                            data: indexArr
                        },
                        // {
                        //     name: '公众号渠道',
                        //     type: 'bar',
                        //     stack: '总量',
                        //     itemStyle: {color: '#FFAD95'},
                        //     data: wxArr
                        // },
                        // {
                        //     name: '小程序渠道',
                        //     type: 'bar',
                        //     stack: '总量',
                        //     itemStyle: {color: '#EEFD7B'},
                        //     data: appletsArr
                        // },
                    ]
                }
                myChart.setOption(option)
            },
            weekTop5Init() {
                var myChart = this.$echarts.init(document.getElementById('weekTop5'));
                let allPeopel = [];
                let manPeopel = [];
                let times = [];
                for(var i = 0; i < this.futureSevenArr.length; i++) {
                    times.push(this.futureSevenArr[i].selectTime.substring(5,10));
                    allPeopel.push(this.futureSevenArr[i].bookingCount);
                    manPeopel.push(this.futureSevenArr[i].remainBookingCount);
                }
                var option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'none'
                        }
                    },
                    legend: [
                        {
                            orient: 'horizontal',
                            x: '62%',
                            y: '1%',
                            align: 'left',
                            data: ['已预约票数'],
                            textStyle: {
                                fontSize: 10,
                                color: '#B2CEEC'
                            },
                            itemHeight: 5, //修改icon图形大小
                            itemWidth: 5, //修改icon图形大小
                        },
                        {
                            orient: 'horizontal',
                            x: '79%',
                            y: '1%',
                            align: 'left',
                            data: ['剩余票数'],
                            textStyle: {
                                fontSize: 10,
                                color: '#B2CEEC'
                            },
                            itemHeight: 5, //修改icon图形大小
                            itemWidth: 5, //修改icon图形大小
                        },
                    ],
                    grid: {
                        top: 35,
                        left: 60,
                        right: 30,
                        bottom: 30
                    },
                    calculable: true,
                    xAxis: [{
                        type: 'category',
                        axisLine: {
                            lineStyle: {
                                type: 'dashed',
                                color: 'rgba(48,178,236,0.6)'
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitArea: {
                            show: false
                        },
                        axisLabel: {
                            interval: 0,
                            color: '#B2CEEC',
                            fontSize: 10
                        },
                        data: times
                    }],
                    yAxis: [{
                        name: '(张)',
                        nameTextStyle: {
                            color: "#B2CEEC",
                            fontSize: 10,
                            padding: [0, 0, 0, -50]
                        },
                        type: 'value',
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color: 'rgba(48,178,236,0.6)'
                            }
                        },
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            interval: 0,
                            color: '#B2CEEC',
                            fontSize: 10

                        },
                        splitArea: {
                            show: false
                        },
                        splitNumber: 4,
                        minInterval: 1,
                        max: function (value) {
                            if( value.max <= 1 ){
                                return value.max  = 10;
                            }else{
                                return value.max;
                            }
                        }
                    }],
                    series: [
                        {
                            name: '已预约票数',
                            type: 'bar',
                            stack: '总量',
                            barMaxWidth: 8,
                            barGap: '10%',
                            itemStyle: {color: '#32E9FF'},
                            data: allPeopel
                        },
                        {
                            name: '剩余票数',
                            type: 'bar',
                            stack: '总量',
                            itemStyle: {color: '#FFAD95'},
                            data: manPeopel
                        },
                    ]
                }
                myChart.setOption(option)
            },
            weekLine() {
                var myChart = this.$echarts.init(document.getElementById('weekDay'));
                const dates = [];
                const nums = [];
                for(var i = 0; i < this.outSevenArr.length; i++) {
                    dates.push(this.outSevenArr[i].time);
                    nums.push(this.outSevenArr[i].refundNum);
                }
                const options = {
                    tooltip: {
                        show: true,
                        trigger: 'axis',
                        // transitionDuration: 0,
                        backgroundColor: 'rgba(50,50,50,0.7)',
                        textStyle: {
                            color: '#fff'
                        },
                        borderWidth: '0',
                        formatter: function (params) {
                            let str = '';
                            let time = params[0].name;
                            for (let i = 0; i < params.length; i++) {
                                str += params[i].marker + '' + params[i].seriesName + ' : ' + params[i].data + '<br>'
                            }
                            return time + '<br>' + str
                        },
                        axisPointer: {
                            lineStyle: {
                                type: 'solid',
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(0, 255, 233,0)'
                                    }, {
                                        offset: 0.5,
                                        color: 'rgba(255, 255, 255,1)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(0, 255, 233,0)'
                                    }],
                                    global: false
                                }
                            }
                        }
                    },
                    legend: {
                        type: 'plain',
                        icon: 'roundRect',
                        itemWidth: 5,
                        itemHeight: 5,
                        top: 6,
                        right: 15,
                        textStyle: {
                            color: '#B2CEEC',
                            fontSize: 10
                        }
                    },
                    grid: {
                        top: 35,
                        left: 40,
                        right: 30,
                        bottom: 30
                    },
                    xAxis: {
                        data: dates,
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                type: 'dashed',
                                color: 'rgba(48,178,236,0.6)'
                            }
                        },
                        axisLabel: {
                            color: '#B2CEEC',
                            fontSize: 10,
                        }
                    },
                    yAxis: {
                        name: '(人)',
                        nameTextStyle: {
                            color: "#B2CEEC",
                            fontSize: 10,
                            padding: [0, 0, 0, -50]
                        },
                        axisLabel: {
                            color: '#B2CEEC',
                            fontSize: 10,
                        },
                        axisLine: {
                            show: false,
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color: 'rgba(48,178,236,0.6)'
                            }
                        },
                        minInterval: 1,
                        max: function (value) {
                            if( value.max <= 1 ){
                                return value.max  = 10;
                            }else{
                                return value.max;
                            }
                        }
                    },
                    series: [{
                        name: '退票人数',
                        type: 'line',
                        data: nums,
                        lineStyle: {
                            color: '#EEFD7B',
                            width: 3
                        },
                        itemStyle: {
                            color: '#EEFD7B',
                        },
                        symbolSize: 0,
                        symbol: 'circle',
                        smooth: false,
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(238,253,123,0.4)' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'rgba(238,253,123,0.4)' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        }
                    }]
                }
                myChart.setOption(options)
            },
        },
        watch: {
            futureSevenArr(val) {
                this.weekTop5Init();
            },
            outSevenArr(val) {
                this.weekLine();
            },
            sevenChannelArr(val) {
                this.weekDatasInit();
            }
        },
        beforeDestroy() {
            clearInterval(this.timer)
        }
    }
</script>

<style scoped lang="scss">
    .chartsCount-contianer {
        position: fixed;
        width: 1490px;
        height: 256px;
        bottom: 19px;
        left: 410px;
        background: rgba(0, 11, 26, 0.6);
        border-top: 1px solid #47BDFF;
        .content {
            width: 100%;
            height: 100%;
            background: rgba(11, 34, 63, 0.5);
            display: flex;
            // 未来7天预约票数统计
            .reservation {
                width: 468px;
                height: 100%;



                .markBg-box-title {
                    font-size: 16px;
                    height: 34px;
                    line-height: 34px;
                    background: url("../../static/visitor/img/ageBox.png") no-repeat 100% 100%;
                    background-size: 100% 100%;
                    text-indent: 9px;
                    color: #fff;
                    padding-right: 35px;
                    display: inline-block;
                }
            }

            // 近7天退票数量
            .refund {
                width: 397px;

                .markBg-box-title {
                    font-size: 16px;
                    height: 34px;
                    line-height: 34px;
                    background: url("../../static/visitor/img/ageBox.png") no-repeat 100% 100%;
                    background-size: 100% 100%;
                    text-indent: 9px;
                    color: #fff;
                    padding-right: 35px;
                    display: inline-block;
                }
            }

            // 各渠道近7天预约数量
            .channel {
                width: 393px;

                .markBg-box-title {
                    font-size: 16px;
                    height: 34px;
                    line-height: 34px;
                    background: url("../../static/visitor/img/ageBox.png") no-repeat 100% 100%;
                    background-size: 100% 100%;
                    text-indent: 9px;
                    color: #fff;
                    padding-right: 35px;
                    display: inline-block;
                }
            }

            // 各渠道注册用户统计
            .register {
                width: 230px;

                .markBg-box-title {
                    font-size: 16px;
                    height: 34px;
                    line-height: 34px;
                    background: url("../../static/visitor/img/ageBox.png") no-repeat 100% 100%;
                    background-size: 100% 100%;
                    text-indent: 9px;
                    color: #fff;
                    padding-right: 35px;
                    display: inline-block;
                }

                .parkNumBox {
                    margin-top: 10px;

                    .parkNumItem {
                        width: 160px;
                        height: 44px;
                        background: url("../../static/traffic/img/parkNumBg.png") no-repeat 100% 100%;
                        background-size: 100% 100%;
                        text-align: center;
                        color: #97D0F4;
                        margin: 50px auto;

                        span {
                            font-size: 20px;
                            color: #fff;
                            font-family: PMZD, serif;
                        }

                        u {
                            text-decoration: none;
                            font-size: 12px;
                            margin-left: 4px;
                        }

                        .top {
                            margin-bottom: 9px;
                            display: flex;
                            align-items: center;
                            justify-content: center;

                        }
                        .bottom{
                            font-size: 12px;
                        }
                    }
                }
            }
        }
        .weekDatasTitle{
            font-size: 12px;
            line-height: 12px;
            color: #97D0F4;
            margin: 10px;
            i{
                display: inline-block;
                width: 6px;
                height: 6px;
                transform: rotateZ(45deg);
                background: #97D0F4;
                margin-right: 8px;
                position: relative;
                top: -2px;
            }
            b{
                color: #fff;
                font-size: 14px;
                margin-left: 8px;
                font-family: PMZD, serif;
            }
        }
    }
</style>